<template>
  <div id="body">
    <p class="title">#{{ title }}#</p>
    <p>{{ name }}</p>
    <div class="img">
      <img v-for="item in imgs" :key="item.id" v-lazy="item.imgname" alt="" />
    </div>
    <span class="desc">{{ describe }}</span>
  </div>
</template>

<script>
import { getPetImg } from '@/api/home'
export default {
  props: ['title', 'name', 'describe', 'imgname'],
  data() {
    return {
      imgs: [],
      newTitle: [],
    }
  },
  watch: {
    title: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
        this.newTitle.push(newVal)
      },
      immediate: true,
    },
  },
  methods: {
    async getImg() {
      const data = await getPetImg()
      console.log(this.newTitle)
      data.data.message.forEach(item => {
        if (item.title == this.newTitle[0]) {
          this.imgs.push(item)
        }
      })
      console.log(this.imgs)
    },
  },
  mounted() {
    this.getImg()
  },
}
</script>

<style lang="scss" scoped>
#body:hover {
  color: rgb(236, 188, 99);
}
#body {
  width: 328px;
  height: 170px;
  margin: auto;
  overflow: hidden;
  margin-top: 15px;
  box-shadow: 0 2px 4px 0 rgba(219, 218, 218, 0.2),
    0 6px 20px 0 rgba(226, 223, 223, 0.19);
  color: black;

  > h6 {
    margin: 0;
    padding: 0;
  }

  > p {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }
  > span {
    font-size: 12px;
  }

  > .img {
    width: 328px;
    height: 93px;
    display: flex;
    // justify-content: space-between;

    > img {
      width: 93px !important;
      height: 93px;
      padding: 0 10px 0 0;
      // margin-right: 50px;

      // &:nth-child(3n) {
      //   margin-right: 0;
      // }
    }
  }
  > .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}
.title {
  font-size: 17px;
  font-weight: bold;
  font-style: oblique;
}
</style>
